<template>
	<!-- 分类标题下面的导航栏 -->
	<view class="fen-title-nav">
		<view class="nav-btn">
			<button class="btn" type="default" size="mini" plain="true">全部</button>
		</view>
		<scroll-view class="scroll" scroll-x="true">
			<view class="scroll-item" 
			:class="{active: index ===  iid}" v-for="(item,index) in list"
			 @click="indexClick(index)">
				{{item}}
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name:"fen-title-nav",
		props:{
			list:{ //接收数据
				type:Array,
				default(){
					return []
				}
			}
		},
		data() {
			return {
				index:null,
				iid:null
			};
		},
		methods:{
			indexClick(i){
				// console.log(i)
				this.index = this.iid = i
			}
		}
	}
</script>

<style scoped lang="scss">
.fen-title-nav{
	display: flex;
	margin-bottom: 30rpx;
	height: 60rpx;
	.nav-btn{
		width: 146rpx;
		height: 50rpx;
		margin-left: 36rpx;
		white-space: nowrap;
		.btn{
			border: 1rpx solid #FF5352;
			border-radius: 25rpx;
			color: #FF5352;
		}
	}
	.scroll{
		// flex: 1;
		height: 50rpx;
		margin-left: 10rpx;
		white-space: nowrap;
		overflow: scroll;
		.scroll-item{
			font-size: 26rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #6E6E6E;
			display: inline-block;
			// text-align: center;
			margin-left: 45rpx;
			padding: 0 15rpx;
		}
		.active{
			border: 1rpx solid #FF5352;
			border-radius: 25rpx;
			color: #ff5500;
			display:inline-block; 
			display:inline; 
			zoom:1; 

		}
	}
}
</style>
